<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body{
		text-align: center;
	}
	#box_bg{
		width:200px;
		height:200px;
		border:2px solid #000;
		margin:20px auto;

	}
	</style>
	<script type="text/javascript">
	window.onload = function (){
    //1.获取节点
     var btn = document.getElementById("btn");
     // console.log(btn);
     var div1=document.getElementById("box_bg");
     // console.log(div1);
     

    //给数组，里面存放颜色
    var bgc = ["red","orange","yellow","green","cyan","blue","purple","pink","blank"];

     //2.给节点加事件
     btn.onclick = function(){
     	//取随机数取整后作为索引
     	var num = Math.floor(Math.random()*10);
     	//更改div背景颜色
     	div1.style.backgroundColor = bgc[num];
     }
	}//加载函数
	</script>
</head>
<body>
	<div id="box_bg"></div>
	<button id="btn">添加随机的背景颜色</button>
	
	<!-- 知识点：
	修改标签样式：节点变量.style.要改的样式的名字 = "样式值" 如果样式名中有连接符如font-size,需要去掉连接符，后一个单词首字母大写，改后为fontSize-->
</body>
</html>